﻿@model Von.Web.Structs.MenuInfo
@{
    ViewData["Title"] = "系统菜单管理";
}
<div class="input-group">
    <span class="input-group-addon">请选择菜单类型</span>
    <select id="MenuKind" class="form-control" onchange="KindSelected()"></select>
</div>
<table id="tree" title="系统菜单管理" class="easyui-treegrid"></table>
<!-- 模态框（Modal） -->
<div class="modal fade" id="editor" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color:grey;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="ModalLabel">菜单编辑</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="MenuName" class="control-label">菜单名称</label>
                    <input id="MenuName" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="MenuClass" class="control-label">菜单样式</label>
                    <input id="MenuClass" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="iconFilename" class="control-label">菜单图标</label>
                    <input id="iconFilename" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="MenuData" class="control-label">菜单内容</label>
                    <input id="MenuData" class="form-control" />
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <input type="hidden" id="ID" />
                    <input type="hidden" id="PID" />
                    <input type="hidden" id="DisplayOrder" />
                    <input type="hidden" id="flag" />
                    <input value="保存" class="btn btn-default" onclick="SaveMenu()" />
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<script type="text/javascript">
    function LoadKind() { AjaxPostData('@Url.Ajax("LoadMenuRoot")', {}, function (result) {
        for(var kind in result) $("#MenuKind").append("<option value='" + result[kind].ID + "'>" + result[kind].MenuName + "</option>");
        $('#MenuKind')[0].selectedIndex = 0;
        KindSelected();
    }); }
    function KindSelected() { InitMenu($("#MenuKind :selected").val()); }
    function InitMenu(ID) {
        $('#tree').treegrid({
            url: '@Url.Ajax("LoadMenu")?Data={ID:\'' + ID + '\'}',
            idField: 'ID',
            treeField: 'MenuName',
            rownumbers: true,
            columns: [[
                { title: '序号', field: 'ID', width: 280 },
                { title: '名称', field: 'MenuName', width: 180 },
                { title: '菜单样式', field: 'MenuClass', width: 180 },
                { title: '菜单图标', field: 'iconFilename', width: 180 },
                { title: '菜单内容', field: 'MenuData', width: 200 },
                { field: 'DisplayOrder', width: 0 }
            ]],
            onLoadSuccess: function (row, result) {
                $("#tree").datagrid("hideColumn", "DisplayOrder");
                $('#tree').treegrid('append', { parent: row == null ? null : row.ID, data: result.Success });
            },
            toolbar: [
                { id: 'btnAdd', text: '添加同级菜单', iconCls: 'icon-add', handler: function () { addMenu("new"); } }, '-',
                { id: 'btnAddChild', text: '添加下级菜单', iconCls: 'icon-add', handler: function () { addMenu("child"); } }, '-',
                { id: 'btnEdit', text: '修改当前菜单', iconCls: 'icon-edit', handler: function () { editMenu(); } }, '-',
                { id: 'btnDel', text: '删除当前菜单', iconCls: 'icon-cancel', handler: function () { delMenu(); } }, '-',
                { id: 'btnUp', text: '上移', iconCls: 'icon-up', handler: function () { MoveMenu(true); } }, '-',
                { id: 'btnDown', text: '下移', iconCls: 'icon-down', handler: function () { MoveMenu(false); } }
               ]
        });
    }
    function getCurrentNode() { return $('#tree').treegrid('getSelected'); }
    function addMenu(flag) {
        var node = getCurrentNode();
        if (flag == "child" && node == null) SysWarning("尚未选择当前节点，无法添加下级。");
        else {
            $("#MenuName").val("");
            $("#MenuClass").val("");
            $("#iconFilename").val("");
            $("#MenuData").val("");
            $("#ID").val("");
            $("#DisplayOrder").val($('#tree').treegrid('getChildren').filter(c => c.PID == (flag == "child" ? node.ID : node.PID)).length + 1);
            $("#PID").val(flag == "child" ? node.ID : (node == null ? $("#MenuKind :selected").val() : node.PID));
            $("#flag").val("new");
            $('#editor').modal('show');
        }
    }
    function getSameMenu(node) {
        if ($('#tree').treegrid('getParent', node.ID) == null) return $('#tree').treegrid('getRoots');
        else return $('#tree').treegrid('getParent', node.ID).children;
    }
    function editMenu() {
        var node = getCurrentNode();
        if (node == null) throw "尚未选择当前节点，无法编辑。";
        var SameNodes = getSameMenu(node);
        $("#MenuName").val(node.MenuName);
        $("#MenuClass").val(node.MenuClass);
        $("#iconFilename").val(node.iconFilename);
        $("#MenuData").val(node.MenuData);
        $("#ID").val(node.ID);
        $("#PID").val(node.PID);
        $("#DisplayOrder").val(SameNodes.indexOf(node));
        $("#flag").val("edit");
        $('#editor').modal('show');
    }
    function delMenu() {
        var node = getCurrentNode();
        var Catalogchildren = $('#tree').treegrid('getChildren', node.ID);
        if (Catalogchildren.length > 0) SysWarning("节点下包含子节点，不可删除此节点。");
        else {
            AjaxPostData('@Url.Ajax("DeleteMenu")', { ID: node.ID },
                function (data) { $('#editor').modal('hide'); return $('#tree').treegrid('remove', node.ID); });
        }
    }
    function SaveMenu() {
        var data = { ID: $("#ID").val(), PID: $("#PID").val(), MenuName: $("#MenuName").val(), MenuClass: $("#MenuClass").val(), iconFilename: $("#iconFilename").val(), MenuData: $("#MenuData").val(), DisplayOrder: $("#DisplayOrder").val(), flag:  $("#flag").val() != "edit"};
        AjaxPostData('@Url.Ajax("SaveMenu")', data,
            function (result) {
                $('#editor').modal('hide');
                if ($("#flag").val() == "edit") $('#tree').treegrid('update', {
                    id: $("#ID").val(), row: data
                }); else {
                    data['ID'] = result;
                    if ($("#flag").val() == "new") $('#tree').treegrid('append', { parent: $("#PID").val(), data: [data]});
                    else $('#tree').treegrid('append', { parent: $("#ID").val(), data: [data] });
                }
            });
    }
    function MoveMenu(isUp) {
        var node = getCurrentNode();
        if (node == null) throw "尚未选择当前节点，无法移动。";
        var SameNodes = getSameMenu(node);
        var idx = SameNodes.indexOf(node);
        if (isUp) {
            if (idx == 0) SysWarning("已经是顶级节点了，无法移动。");
            else {
                var data = { ID: node.ID, Order: idx };
                AjaxPostData('@Url.Ajax("MoveMenu")', data,
                    function (result) {
                        var n2 = $("#tree").treegrid("pop", node.ID);
                        $("#tree").treegrid("insert", { before: SameNodes[idx - 1].ID, data: n2 });
                        $("#tree").treegrid("select", node.ID);
                    });
            }
        } else {
            if (SameNodes.length - 1 == idx) SysWarning("已经是最后节点了，无法移动。");
            else {
                var data = { ID: node.ID, Order: idx + 2 };
                AjaxPostData('@Url.Ajax("MoveMenu")', data,
                    function (result) {
                        var n2 = $("#tree").treegrid("pop", SameNodes[idx + 1].ID);
                        $("#tree").treegrid("insert", { before: node.ID, data: n2 })
                    });
            }
        }
    }
</script>
@Html.Partial("~/Views/Shared/_TreeScriptsPartial.cshtml")
@Html.Import(EImportSection.Footor, "Menu", @<script> LoadKind();</script>)